<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .longtext{
            width: 50%;
            /* 超出部分用... */
            text-overflow: ellipsis;
            /* 超出要隐藏 */
            overflow: hidden;
            /* 不自动换行 */
           white-space: nowrap;
        }
        .longtext2{
            width: 50%;
           
           
            /* 超出要隐藏 */
            overflow: hidden;

            /*多行超出文本*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            
            -webkit-line-clamp: 3;
            /* overflow : hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box; */


        }
    </style>
</head>
<body>
    <div class="longtext">
        /**
 * 浅拷贝
 * 4种：
 * 1.直接变量赋值
 * 2.Object.assign
 * 3.xxx.slice()
 * 4.Array.from
 * 5.扩展运算符...
 * 
 * 深拷贝：
 * 1.JSON.stringfy()
 * 2.structuredClone(兼容性问题)
 * 3.第三方库lodash
 * 4.自定义函数实现深拷贝（循环引用问题，多种对象的处理）
    </div>
    <div class="longtext2">
        /**
 * 浅拷贝
 * 4种：
 * 1.直接变量赋值
 * 2.Object.assign
 * 3.xxx.slice()
 * 4.Array.from
 * 5.扩展运算符...
 * 
 * 深拷贝：
 * 1.JSON.stringfy()
 * 2.structuredClone(兼容性问题)
 * 3.第三方库lodash
 * 4.自定义函数实现深拷贝（循环引用问题，多种对象的处理）
    </div>
</body>
</html>